<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.hxci.web.bean.WhitelistUrl" %>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL白名单配置</title>
    <link rel="stylesheet" type="text/css" href="css/styless.css">
    <style>
        /* 设置字体为Arial或sans-serif */
        body {
            font-family: Arial, sans-serif;
            /* 设置页边距为20px */
            margin: 20px;
        }
        .container {  /* 内容容器 */
            max-width: 600px;   /* 最大宽度限制 */
            margin: 0 auto;      /* 水平居中（上下外边距为0） */
            background:  #004b8057;
            padding: 2rem;       /* 内边距（响应式单位） */
            border-radius: 12px; /* 圆角边框 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 底部阴影效果 */
        }
        .input-group {
            /* 设置输入框组的底部外边距 */
            margin-bottom: 10px;
        }
        .input-group label {
            /* 设置输入框组的标签显示为块级元素，并设置底部外边距 */
            display: block;
            margin-bottom: 5px;
        }
        .input-group textarea {
            /* 设置输入框组的文本域宽度为100%，内边距为8px，并设置盒模型为border-box */
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .input-group button {
            /* 设置输入框组的按钮内边距为10px 20px */
            padding: 10px 20px;
        }
        .whitelist {
            /* 设置白名单的顶部外边距 */
            margin-top: 20px;
        }
        .whitelist-item {
            /* 设置白名单项的背景颜色为#f0f0f0，内边距为10px，底部外边距为5px，边框圆角为5px，并设置显示为flex布局，水平和垂直居中对齐 */
            background-color: #f0f0f0;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .whitelist-item button {
            /* 设置白名单项的按钮内边距为5px 10px，背景颜色为#ff4d4d，文字颜色为白色，无边框，边框圆角为5px，并设置鼠标悬停时为手型 */
            padding: 5px 10px;
            background-color: #ff4d4d;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>URL白名单配置</h1>
        <form class="input-group" onsubmit="event.preventDefault(); addToWhitelist();">
            <label for="url">请输入URL:</label>
            <textarea id="url" placeholder="例如: https://example.com" style=text-align:left></textarea>

            <button type="submit">添加到白名单</button>
        </form>
        <div class="whitelist">
            <h2>白名单列表</h2>
            <div id="whitelist-container"></div>
        </div>
    </div>

    <script>
        // 从LocalStorage获取白名单数据

        let whitelist = JSON.parse(localStorage.getItem('whitelist')) || [];
        //
        //
        // // 将数据发送到服务器
        // xhr.send(JSON.stringify({whitelist: whitelist}));
        //
        const fixedWhitelist = ["/login.jsp", "/loginAdmin.jsp", "/register.jsp", "/index.jsp","/images","/book1.jsp","/styles.css","/about.jsp","/images/2.jpg",
            "/userxx.jsp","/profile.jsp","/css/styles1.css","/css/styles.css","/user.jsp","/book.jsp","/main.jsp","/right.jsp","/left.jsp","/top.jsp"
            ];
        const existingUrls = fixedWhitelist.filter(url => whitelist.includes(url));
        if (existingUrls.length > 0) {
            //如果有添加中有重复的URL，则只添加未重复的URL
            //未重复的URL
            const newUrls = whitelist.filter(url => !existingUrls.includes(url));
            whitelist = whitelist.concat(newUrls);

        }else
            whitelist= whitelist.concat(fixedWhitelist);
        saveWhitelistToLocalStorage();
        // 添加到白名单
        function addToWhitelist() {
            const urlInput = document.getElementById('url').value;
            if (urlInput) {
                // 使用逗号分隔符分割输入的URL
                const urls = urlInput.split(',').map(url => url.trim()).filter(url => url);
                const existingUrls = urls.filter(url => whitelist.includes(url));
                if (existingUrls.length > 0) {
                    alert('以下URL已添加到白名单中: ' + existingUrls.join(', '));
                    return;
                }
                whitelist = whitelist.concat(urls);
                document.getElementById('url').value = ''; // 清空输入框
                updateWhitelistDisplay();
                saveWhitelistToLocalStorage();
            }
        }

        function updateWhitelistDisplay() {
            // 获取id为'whitelist-container'的元素
            const container = document.getElementById('whitelist-container');
            container.innerHTML = ''; // 清空当前显示的白名单
            whitelist.forEach((url, index) => {
                const item = document.createElement('div');
                item.className = 'whitelist-item';

                const urlText = document.createElement('span');
                urlText.textContent = url;

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                // 使用箭头函数，确保index在点击事件中被正确捕获
                deleteButton.onclick = () => removeFromWhitelist(index);

                item.appendChild(urlText);
                item.appendChild(deleteButton);
                container.appendChild(item);
            });
        }

        // 从白名单中移除URL
        function removeFromWhitelist(index) {
            whitelist.splice(index, 1);
            updateWhitelistDisplay();
            saveWhitelistToLocalStorage();
        }

        // 将白名单保存到本地存储
        function saveWhitelistToLocalStorage() {
// 将白名单转换为逗号分隔的字符串
            localStorage.setItem('whitelist', JSON.stringify(whitelist));
            // const whitelistData = whitelist.join(',');
            // 创建XMLHttpRequest对象
            // const xhr = new XMLHttpRequest();
            // xhr.open("POST", "UpdateWhitelistServlet", true);
            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState === 4 && xhr.status === 200) {
            //         alert(xhr.responseText);
            //     }
            // };
            // // 发送白名单数据
            // xhr.send("whitelist=" + encodeURIComponent(whitelistData));

        }

        updateWhitelistDisplay(); // 页面加载时显示白名单
    </script>
</body>
</html>
